﻿<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<GeoServerCapabilities>" %>
<%@ Import Namespace="Localization" %>
<%@ Import Namespace="System.Web.Configuration" %>
<%@ Import Namespace="Sinbiota.Web.Models" %>
<html>
<head>
    <title>Atlas 2.0 - AJAX Version</title>
    <script src="<%: Url.Content("~/Scripts/jquery-1.7.1.min.js")%>" type="text/javascript"></script>
    <script src="<%: Url.Action("MapJavascript")%>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/Custom/V7ClientSideClustering-min.js")%>" type="text/javascript"></script>

    <%--JQuery UI--%>
    <link href="<%: Url.Content("~/Content/jquery-ui.css")%>" rel="stylesheet" type="text/css" />
    <script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.4.min.js")%>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.activity-indicator-1.0.0.min.js")%>" type="text/javascript"></script>
    
    <link href="<%: Url.Content("~/Content/toastmessage/css/jquery.toastmessage.css")%>" rel="stylesheet" type="text/css" />
    <script src="<%: Url.Content("~/Scripts/Custom/jquery.toastmessage.js")%>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/Custom/BiotaDialogs.js")%>" type="text/javascript"></script>

    <link href="<%: Url.Content("~/Content/bootstrap2/css/bootstrap.css")%>" rel="stylesheet" type="text/css" />
    <link href="<%: Url.Content("~/Content/bootstrap2/css/map.css")%>" rel="stylesheet" type="text/css" />
    <script src="<%: Url.Content("~/Content/bootstrap2/js/bootstrap.js")%>" type="text/javascript"></script>

    <%--<link href="<%: Url.Content("~/Content/ajaxmap.css")%>" rel="stylesheet" type="text/css" />--%>
<%--    <script src="<%: Url.Content("~/Content/bootstrap/bootstrap.min.js")%>" type="text/javascript"></script>--%>
    

        <%--Get application root; needed by some scripts:--%>
    <script type="text/javascript">
        var approot = '<%: Request.ApplicationPath %>';
        if (approot == "/") approot = ""; 
    </script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

<%--  *******   Map init Code ****** --%>
<script type="text/javascript">

    // Start up:
    $(document).ready(function () {

        //init map:
        GetMap();

        // show layer fields and start dialog:
        $(".toggle").each(function (idx, value) {
            $(value).show();
        });

        activateButtons();
          
        <% if (!String.IsNullOrWhiteSpace((string) ViewData["PagedListGuid"])) { %>
            // Get cached occurrences from search:
            getCachedOccurrences(map, ajax_activity, '<%: ViewData["PagedListGuid"] %>')
        <% } %>

        //Adjust map height:
        $("#mapDiv").height($(window).height() * 0.99);

        // Initialize layer state:
            <% for (int i = 0; i < Model.Layers.Count; i++) { %>
                LayerState[<%: i %>] = false;
            <% } %>
    });

</script>

<%--*************  Toolbar and search interface ************** --%>
<script type="text/javascript">
    function ajax_activity(bool) {
        if (bool) {
            $("#waiting_span").activity({ width: 2, space: 2, length: 3 });
            $("#mapDiv_wait").activity();
        }
        else {
            $("#waiting_span").activity(false);
            $("#mapDiv_wait").activity(false);
        }
    }

    function activateButtons() {

        // Activate UI buttons:
        $("#show_functions").click(function () {
            ShowFunctionsDialog();
        });

        $("#sinbiota_home").click(function () {
            document.location = approot;
        });

        // SEARCH:
        $("#advanced_search_button").click(function () {
            ShowSearchDialog();
        });

        $("#clear_search").click(function () {
            pushpin_layer.SetData(null);
            infobox_layer.clear();
            CloseFunctionsDialog();
        });

        $("#submit_advanced_search").click(function () {
            searchOccurrences(map, ajax_activity, $("#SearchField").val(), $("#LegacyTaxonomicGroupId").val(), $("#MunicipalityId").val(), $("#ProjectId").val(), $("#Ambient").val(), $("#OccurrenceSearchOption").val());
            CloseFunctionsDialog();
        });
        $("#search_square").click(function () {
            start_drawing();
            CloseFunctionsDialog();
        });

    }
    
</script>

</head>--%>

<body>

<%--    <div id="mapheader">
        <span id="toolbar">
            <a href="#" id="show_functions" title="<%: Strings.ShowMapFunctions %>" ><img src='<%: Url.Content("~/Content/img/Gear.png") %>' /></a>
            <a href="#" id="sinbiota_home"  title="<%: Strings.GoToHomePage %>" ><img src='<%:Url.Content("~/Content/img/Home.png")%>' /></a>
            <a href="#" id="advanced_search_button" title="<%: Strings.SearchOccurrences %>" ><img src='<%:Url.Content("~/Content/img/Search.png")%>' /></a>
            <span id="waiting_span" style="margin-right:0.5em">&nbsp;</span>
        </span>
    </div>
    --%>

    <div id="toolbar">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-align-justify"></i> <%: Strings.Layers %>
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
        <% var c = 0;  foreach (var layer in Model.Layers)
            { c++;  %>
                <li><a href="javascript:toggleLayer(<%: c %>,'<%: layer.Id %>');" title="<%: layer.Title %>" ><span class=""><%: layer.Title %></span></a></li>
<% } %>
        </ul>
        <a href="#" id="sinbiota_home" title="<%:Strings.GoToHomePage %>" ><span class="btn"><i class="icon-home"></i> HomePage</span></a>
        <a href="#" id="show_functions" title="<%:Strings.ShowMapFunctions %>" ><span class="btn"><i class="icon-asterisk"></i> <%: Strings.ShowMapFunctions %></span></a>
        <a href="#" id="advanced_search_button" title="<%:Strings.SearchOccurrences %>" ><span class="btn"><i class="icon-search"></i> <%:Strings.SearchOccurrences %></span></a>
        <span id="waiting_span" style="margin-right:1em; margin-left:0.5em;">&nbsp;</span>
    </div>

    <div id='mapDiv' class="BingMap">
    </div>
    <div id='mapDiv_wait' style="position:absolute;width:30px; height:30px; top:60px; left:15px; z-index:100"> </div>

<div id="map_legend">
            <% var c1 = 0;  foreach (var layer in Model.Layers)
               { c1++;  %>
        <div id="legend_<%: c1 %>" class="well" style="display: none; min-width: 300px;" >
            <a class="close" href="javascript:toggleLayer(<%: c1 %>, '<%: layer.Id %>');"><i class="icon-remove"></i></a>
            <h4 class="alert-heading" style="margin-bottom: 10px;"><%: layer.Title %></h4>
            <img src="<%: Model.Url %>wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=10&HEIGHT=10&STRICT=false&style=<%:layer.Style %>&legend_options=fontAntiAliasing:true;fontColor:0x333333;fontSize:12;bgColor:0xf5f5f5">
        </div>
    <% } %>
</div>


<div id="advanced_search" style="display:none;" title="<%: Strings.AdvancedSearch %>">
    <% Html.RenderPartial("OccurrenceSearchForm", new OccurrenceSearchModel()); %>
    <p>
    <button id="submit_advanced_search" class="green radius small button"><%: Strings.Search %></button>
    </p>
</div>

<div id="map_functions" style="display:none;" title="Functions">
    <ul>
    <li>
        <a href="#" id="search_square"><img alt="<%: Strings.FindOccurrencesInSquare %>" src="<%: Url.Content("~/Content/img/Write2.png") %>" /></a><%: Strings.FindOccurrencesInSquare %>
    </li>
    <li>
        <a href="#" id="clear_search"><img alt="<%: Strings.ClearResults %>" src='<%: Url.Content("~/Content/img/Trash.png") %>' /></a><%: Strings.ClearResults %>
    </li>
    </ul>
</div>


<%--"Prettify" forms:--%>
<script type="text/javascript">
    $(document).ready(function () {
        $(document.forms).addClass('nice');
        $('[type = text]').addClass('input-text').height('30px');
        $('[type = password]').addClass('input-text');
        $('[type = submit]').addClass('small button radius');
        // text area size:
        $("textarea").width('600px');
        $("textarea").height('150px');

    });
</script>

</body>
</html>
